<%@ include file="/WEB-INF/jsp/common.jsp"%>

 

<script type="text/javascript" src="js/app/common.js"></script>
      
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/css/ui.multiselect.css" />
 
    <script src=     "js/jqgrid/grid.locale-en.js"  type="text/javascript"></script>
    <script src=    "js/jqgrid/jquery.jqGrid.min.js"   type="text/javascript"></script>
    <script src=    "js/jqgrid/grid.formedit.js"    type="text/javascript"></script> 
    <script src=   "js/jqgrid/jquery.jqGrid.src.js"    type="text/javascript"></script>
     

<title>Myschool home</title>
	<script   type="text/javascript">



	 
 $(document).ready(function() {
		 
	 var teachers =$.ajax(
			 {url: 'teacherList.htm', 
				 async: false, 
				 success: function(data, result) {
					    
					 if (!result) alert('Failure to retrieve the teachers.');
						 
					 }			 }).responseText;

	 var grades =$.ajax(
			 {url: 'gradeList.htm', 
				 async: false, 
				 success: function(data, result) { 
					 if (!result) alert('Failure to retrieve the teachers.');
						 
					 },  
				failure: function(data, result) {
				    
					    alert('Failure to retrieve the Countries.');
						window.alert(data);

					 }
			 }).responseText;
	 	
	 jQuery("#gridClass").jqGrid({ 
		 url:'classInformation.htm?standardID=1',
		 editurl:"addClass.htm",
		  datatype: "json", 
		  colNames:['StandardID','sectionID','Section Name', 'Class Teacher', 'Comments'], 
		  colModel:[ 
		  {name:'StandardID',index:'StandardID',editable:true,width:15,  hidden: true, viewable: false  },
		  {name:'sectionID',index:'sectionID',editable:true,width:15,  hidden: true, viewable: false  }, 
		  {name:'sectionName',index:'sectionName', width:100, resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20}}, 
		  {name:'classTeacher',index:'classTeacher', width:100, align:"right", resizable: true, hidden: false, viewable: true,editable:true,edittype:"select", editoptions:{size:20, value: teachers}}, 
		  {name:'comments',index:'comments', width:110,align:"right",editable:true,editoptions:{size:20}} ],
		  rowNum:30,
		  rowList:[10,20,30], 
		  pager: '#pageClass', 
		  sortname: 'id', 
		  viewrecords: true, 
		  sortorder: "desc", 
		  rownumbers: true,
		  height : 300,
		  width: 680, 
		  caption: "Class Information" }); 
	 var addOptions = { reloadAfterSubmit:false, 
			 beforeShowForm: function(form) { $('#tr_Class', form).show(); }, 
    		 onclickSubmit : function(eparams) {  
			}};
     var deleteOptions = { reloadAfterSubmit:false, url : "deleteClass.htm",
    		 onclickSubmit : function(eparams) { 
					var allUserIDs = "";
    			    var selectedrows = jQuery("#gridClass").jqGrid('getGridParam', 'selarrrow'); 
    			    // we can use all the grid methods here
    			    //to obtain some data 
    			    for(var row in selectedrows)
    			    	{
    			        var userID = 	jQuery('#gridClass').jqGrid('getCell',selectedrows[row],'userid');
    			        allUserIDs = allUserIDs + userID + ";" 
    			    	}
    			    eparams.url = eparams.url + "?userID= " + allUserIDs; 
    			}};
     var editOptions = {reloadAfterSubmit:false, 
    		 onclickSubmit : function(eparams) { 
					 
 			}};
     
     jQuery("#gridClass").jqGrid('navGrid', '#pageClass', { add: true, view: true, del: true, edit: true },
    	     editOptions, // edit options
             addOptions , // add options
             deleteOptions, // del options
             {}, // search options
             {   // vew options
             beforeShowForm: function(form) {
              
             }
         }); 
 });


	function createGrades()
	{
	
		$.ajax(
				 {url: 'addGrades.htm?sectionGrade=3&gradeRange=1', 
					 async: false, 
					 success: function(data, result) {
						    
						 if (!result) alert('Failure to retrieve the teachers.');
							 
						 }			 })
						 return false;
	}

	function gradeSectionChanged(sel) {
		 
		 $("#gridClass").setGridParam(
	             { 
	                     url: 'classInformation.htm?standardID='+sel.value
	             }
	             ).trigger("reloadGrid")
	 }
	window.onload = function() {

		window.alert($("standardRange") + "asds");
		$("classDisplayDiv").style.visibility = 'hidden'; 
		$("standardRange").style.visibility = 'none';

		}
		  </script> 
</head>

<body class="body-content-class">



<div id="wrapper" style="width: 1100px">
	<div id="banner">

<!-- include top common header links/buttons,change accordingly -->

<%@ include file="/WEB-INF/jsp/commonHeader.jsp"%>

<!-- include top navigation links/buttons,change accordingly -->

<%@ include file="/WEB-INF/jsp/navigationTop.jsp"%>

	</div>
	<div id="content-wrapper">
		<div id="content">
		<div class="content-top">
		</div>
		<div class="content">


<div class="content-body">
	<table cellspacing="0" cellpadding="0" class="layout-grid">
		<tr>
			<td>
<table class="layout-grid" cellspacing="0" cellpadding="0">
	<tr>
		 <td class="left-nav">
		
<!-- include  content navigation left links/buttons,change accordingly -->

<%@ include file="/WEB-INF/jsp/navigationContentLeft.jsp"%>
		
		</td>
		<td class="normal">
				<div id="demo-header">
							<h2>Class Config</h2>
						</div>
						<div style="position: absolute; right: 27px" id="switcher"></div>
						<div id="demo-config">
							<div id="demo-frame-wrapper">
							<div id="demo-frame" style="height: 500px; width: 910px;">

<div class="demo-description" style="height: 300px">


<form  id="add-teacher-form-id" name="add-teacher-form" modelAttribute="user"  >
 
 <div id="classDisplayDiv" >
  <br>
  Select Standard :
 <form:select path="gradeList" onchange="gradeSectionChanged(this);" id="selectStandard" >
    <form:option value="0" label="--- Select ---"/>
    <form:options items="${gradeList}" itemValue="entityId" itemLabel="gradeName"/>
 </form:select>  
 
   <table id="gridClass">
  </table> <div id="pageClass"></div>
</div>
  <table>
  
  <tr>
  <td>
 Select Standard Range : </td>
 
 <td> 
  <select id="standardRange" onchange="enter();"> 
  <option value="194">Nursery - UKG</option> 
  <option value="198">Nursey - 10</option> 
  <option value="202">LKG - 10</option>
  <option value="4">1 - 10</option> 
  </select>
  </td>
<td>


</td>
  </tr>
  <tr>
  
  <td>
Select Sections : </td>

<td>
<select id="sectionRange" onchange="enter();"> 
  <option value="1">A</option> 
  <option value="2">A,B</option> 
  <option value="3">A,B,C</option>
  <option value="4">A,B,C,D</option> 
  </select>  
  </td>
  </tr>
  
  <tr>
  <td>
  <button id="btnSave" style="width: 100px;" onclick="createGrades();">Create</button>
  </td>
  </tr>
  
  </table> 
   
 
 
</form>

</div><!-- End demo-description -->

								</div>									
							</div>
						 
						</div>
					

<div class="UIAPIPlugin" id="widget-docs">
  

  <div id="options">
    <h2 class="top-header">Options</h2>
    <ul class="options-list">
      



    </ul>
  </div>
  
  <div id="methods">
    <h2 class="top-header">Methods</h2>
    <ul class="methods-list">
    </ul>
  </div>
  <div id="theming">
  </div>
</div>



		</td>
	</tr>
</table>


			</td>
		</tr>
	</table>
</div>
		</div>
		</div>
	</div>
	<div id="footer">
	
	<!-- include  footer content links/buttons,change accordingly -->

<%@ include file="/WEB-INF/jsp/footer.jsp"%>
	
	</div>
</div>
</body>

</html>